status/brightness: Handle multiple monitors

The BrightnessManager exposes a global scale and per monitor scales
which we can also hook up to give users control over individual monitor
brightnesses. If there are more than one controllable backlight, the
brightness slider in quick settings becomes expandable and shows a
slider for each monitor with controllable backlight.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3751>

diff --git a/js/ui/status/brightness.js b/js/ui/status/brightness.js
index d4e57f1cabbc4e551a81c3506b98531b0d898a7c..f2e7f1b212d75e2124940acaf1ae55337e0fe30a 100644 (file)
--- a/js/ui/status/brightness.js
+++ b/js/ui/status/brightness.js
@@ -1,10 +1,39 @@
+import Clutter from 'gi://Clutter';
 import GObject from 'gi://GObject';
+import St from 'gi://St';
 
 import {QuickSlider, SystemIndicator} from '../quickSettings.js';
 import * as Main from '../main.js';
+import * as PopupMenu from '../popupMenu.js';
+import {Slider} from '../slider.js';
 
 const BRIGHTNESS_NAME = _('Brightness');
 
+class BrightnessSliderMenu extends PopupMenu.PopupMenuSection {
+    addSlider(scale) {
+        const text = new PopupMenu.PopupMenuItem(scale.name, {reactive: false});
+        this.addMenuItem(text);
+
+        const slider = new Slider(0);
+        slider.accessible_name = scale.name;
+
+        const sliderBin = new St.Bin({
+            style_class: 'slider-bin',
+            child: slider,
+            reactive: true,
+            can_focus: true,
+            x_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+
+        const sliderMenuItem = new PopupMenu.PopupBaseMenuItem({reactive: false});
+        sliderMenuItem.add_child(sliderBin);
+        this.addMenuItem(sliderMenuItem);
+
+        return slider;
+    }
+}
+
 const BrightnessItem = GObject.registerClass(
 class BrightnessItem extends QuickSlider {
     _init() {
@@ -14,6 +43,10 @@ class BrightnessItem extends QuickSlider {
 
         this.slider.accessible_name = BRIGHTNESS_NAME;
 
+        this.menu.setHeader('display-brightness-symbolic', BRIGHTNESS_NAME);
+        this._monitorBrightnessSection = new BrightnessSliderMenu();
+        this.menu.addMenuItem(this._monitorBrightnessSection);
+
         this._manager = Main.brightnessManager;
         this._manager.connectObject('changed',
             this._onManagerChanged.bind(this), this);
@@ -31,12 +64,19 @@ class BrightnessItem extends QuickSlider {
         const {globalScale} = this._manager;
         this.set({
             visible: globalScale && !globalScale.locked,
+            menuEnabled: this._manager.scales.length > 1,
         });
 
         if (!this.visible)
             return;
 
+        this._monitorBrightnessSection.removeAll();
+
         this._connectSlider(this.slider, globalScale);
+        for (const scale of this._manager.scales) {
+            const slider = this._monitorBrightnessSection.addSlider(scale);
+            this._connectSlider(slider, scale);
+        }
     }
 
     _connectSlider(slider, scale) {